<template>
	<view class="content">
		<view class="head">
			<!-- 视频 -->
			<view class="head-video">
				<view v-if="Vurl && !isChangeFriend">
					<video class="video" :src="Vurl" controls v-show="showVideo"></video>
					<view class="del">
						<i class="iconfont iconqingkong" @click="Vurl=''"></i>
					</view>
				</view>
				<view class="nonefile" v-else-if="!Vurl" @tap="chooseVideo">
					<i class="iconfont icon-hao"></i>
					<view class="none-text">选择视频</view>
				</view>
			</view>
			<!-- 封面 -->
			<view class="head-image">
				<view v-if="url" class="image">
					<image :src="url" mode="aspectFill"></image>
					<view class="del" @click="url=''">
						<i class="iconfont iconqingkong"></i>
					</view>
				</view>
				<view class="nonefile" v-else @tap="chooseImage">
					<i class="iconfont icon-hao"></i>
					<view class="none-text">选择封面</view>
				</view>
			</view>
		</view>
		<!-- 输入文本 -->
		<view class="video_input">
			<textarea :cursor="cursor" :maxlength="-1" :focus="focus" @focus="onFocus" v-model="topicText" @input="setText" @blur="onBlur" />
		</view>

		<!-- 话题按钮 -->
		<view class="video-btn">
			<view class="video_btn_item" @tap="openWindow(1)"># 话题</view>
			<view class="video_btn_item" @tap="openWindow(2)">@ 好友</view>
		</view>


		<!-- 选择 -->
		<view class="video_nav" v-for="(item,index) in navList" :key="index" @click="navaction(index)">
			<view class="video_nav_left">
				<view class="video_nav_icon"><i class="iconfont" :class="item.icon"></i></view>
				<view class="video_nav_text">{{item.name}}</view>
			</view>
			<view class="video_nav_right">
				<view class="video_nav_right_text">{{item.value}}</view><i class="iconfont iconfanhui2"></i>
			</view>
		</view>

		<!-- 选择话题 -->
		<my-topic v-if="isChangeTopic" :setheight="height" @setTopicText="setTopicText"></my-topic>

		<!-- 选择好友 -->
		<my-friend v-if="isChangeFriend" @closeAll="closeAll" @setFriend="setFriend"></my-friend>

		<!--底部按钮-->
		<view class="video_bottom_btn">
			<view class="video_bottom_btn_left">存草稿</view>
			<view class="video_bottom_btn_right" @click="finish">发布</view>
		</view>
	</view>
</template>
<script>
	import myTopic from './components/changeTopic.vue';
	import myFriend from './components/changeFriend.vue';
	export default {
		components: {
			myTopic,
			myFriend
		},
		data() {
			return {
				video_id: '',
				sign: '',
				focus: true,
				topicText: '#抖校#',
				cursor: 2,
				url: '',
				Vurl: "",
				showVideo: true,
				isChangeTopic: false,
				isChangeFriend: false,
				height: 0,
				location: [],
				navList: [{
						icon: 'iconweizhi',
						name: '添加位置',
						value: '前往选择',

					},
					{
						icon: 'icondaohang',
						name: '发布范围',
						value: '全部'
					},
					{
						icon: 'iconsuo',
						name: '发布对象',
						value: '全部'
					}
				],
				Audience_scope: ['1'],
				Release_scope: ['1'],
				school_id: [],
				aoe:1,
				obj:1,

			};
		},
		onLoad(e) {
			let item = JSON.parse(decodeURIComponent(e.item));
			this.video_id = item.video_id;
			this.Vurl = item.video_url;
			this.url = item.img_url;
			this.topicText = item.title;
			console.log(item, "===");
		},
		onShow() {
			console.log('obj',this.obj);
			console.log('aoe',this.aoe);
			this.$api.apiPost('user/App/getsign').then(res => {
				if (res.data.code == 200) {
					this.sign = res.data.data.sign;
				}
			});
			let _this = this;
			uni.$once('look-obj', function(data) {
				console.log('Audience_scope',data.Audience_scope);
				_this.obj = data.Audience_scope
				_this.Audience_scope = data.Audience_scope;
				switch (data.Audience_scope) {
					case '1':
						_this.navList[2]['value'] = '全部';
						break;
					case '2':
						_this.navList[2]['value'] = '仅自己';
						break;
					case '3':
						_this.navList[2]['value'] = '仅老师';
						break;
					case '4':
						_this.navList[2]['value'] = '仅家长';
						break;
				}
			})

			uni.$once('send_aoe', function(data) {
				console.log('Release_scope',data.Release_scope);
				_this.aoe = data.Release_scope
				let str = '';
				this.school_id = data.school_id;
				_this.Release_scope = data.Release_scope;
 				data.Release_scope.forEach((item, key) => {
					console.log('item',item);
					switch (item) {
						 case '1':
						 	str += '全部  ';
						 break;
						case '2':
							str += '个人  ';
							break;
						case '3':
							str += '学校  ';
							break;
						case '4':
							str += '机构  ';
							break;
					}
				});
				console.log('_this.aoe',_this.aoe);
				if(_this.aoe.length >= 3||_this.aoe == 1){
					str = '全部'
				}
				_this.navList[1]['value'] = str;

			});

		},
		methods: {
			/* 发布视频 */
			finish() {
				this.topicText = this.topicText.replace(/amp;/g, '').replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/[, ]/g, '');
				var data = {
					title: this.topicText,
					img_url: this.url,
					video_url: this.Vurl,
					sign: this.sign,
					school_id: this.school_id.join(','),
					Release_scope: this.Release_scope.join(','),
				};
				if(typeof this.Audience_scope == 'object'){
					data.Audience_scope = this.Audience_scope.join(',')
				}else if(typeof this.Audience_scope == 'string'){
					data.Audience_scope = this.Audience_scope
				}
				console.log(data);
				let regex = /\#(.+?)\#/g;
				let result;
				let topicarr = [];
				while ((result = regex.exec(this.topicText)) != null) {
					topicarr.push(result[1])
				}
				if (topicarr.length > 0) {
					data.topic_name = topicarr.join(',');
				}
				if (this.location && this.location.length > 0) {
					var longitude = this.location[0].longitude;
					var latitude = this.location[0].latitude;
					data.coordinate = longitude + ',' + latitude;
					data.province_name = this.location[0].province_name;
					data.city_name = this.location[0].city_name;
					data.area_name = this.location[0].name;
				}
				let path = 'user/video.Lists/VideoAdd';

				if (this.video_id) {
					path = 'user/video.Lists/VidelEidt';
					data.video_id = this.video_id;
				}
				if (!data.title) {
					uni.showToast({
						title: '请填写视频标题',
						icon: 'none'
					});
					return
				} else if (!data.img_url) {
					uni.showToast({
						title: '请选择视频封面',
						icon: 'none'
					});
					return
				} else if (!data.video_url) {
					uni.showToast({
						title: '请选择视频',
						icon: 'none'
					});
					return
				} else {
					this.$api.apiPost(path, data).then(res => {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						});
						if (res.data.code == 200) {
							setTimeout(function() {
								uni.reLaunch({
									url: '/pages/school/index'
								})
							}, 1000);
						}
					});
				}
				console.log(data);
			},
			/* 打开弹窗*/
			openWindow(type) {
				switch (type) {
					case 1:
						this.topicText += "##";
						var _this = this;
						setTimeout(function() {
							_this.focus = true;
							_this.cursor = _this.topicText.length - 1;
						}, 500)
						break;
					case 2:
						this.isChangeFriend = !this.isChangeFriend;
						break;
					case 3:
						this.isChangeArea = !this.isChangeArea;
						break;
				}
			},
			navaction: function(index) {
				switch (index) {
					// 发布点位
					case 0:
						this.chooseLocation();
						break;
						// 发送范围
					case 1:
						uni.navigateTo({
							url: '../album/send-aoe?aoe='+this.aoe
						})
						break;
						//发送对象
					case 2:
						uni.navigateTo({
							url: '../album/look-obj?obj='+this.obj
						})
						break;
					default:
						break;
				}

			},
			/* 选择地址 */
			chooseLocation: function() {
				var _this = this;
				/* https: //apis.map.qq.com/ws/geocoder/v1/?location=22.25409,113.586457&key=225BZ-7QO34-BZOUQ-DU247-YIGX7-IZF3M&output=json */
				uni.chooseLocation({
					success: res => {
						var area = res;
						var data = {
							key: '225BZ-7QO34-BZOUQ-DU247-YIGX7-IZF3M',
							get_poi: 0
						};
						var url = 'http://apis.map.qq.com/ws/geocoder/v1/?location=' + res.latitude + ',' +
							res.longitude;
						data.output = 'json';
						uni.request({
							type: 'get',
							dataType: 'jsonp',
							data: data,
							jsonp: 'callback',
							jsonpCallback: 'QQmap',
							url: url,
							success: function(json) {
								var toStr = JSON.stringify(json);
								var vstr = JSON.parse(json['data']);
								area.province_name = vstr.result.address_component.province;
								area.city_name = vstr.result.address_component.city;
								_this.location.unshift(area);
								_this.navList[0]['value'] = _this.location[0]['address'];
								console.log(JSON.stringify(_this.navList[0]['value']));
							},
							error: function(err) {
								uni.showToast({
									title: '服务端错误，请刷新浏览器后重试',
									icon: 'none'
								})
							}
						});
					}
				});
			},
			/* 选择封面图片 */
			chooseImage: function() {
				var _this = this;
				uni.chooseImage({
					count: 1,
					success: function(res) {
						uni.showLoading({
							title: '上传中'
						});
						_this.$uapi.apifile('api/v1/upload', {
							file: res.tempFilePaths[0]
						}).then(res => {
							var result = JSON.parse(res.data);
							if (result.code == 200) {
								_this.url = result.data.fileUrl;
							} else {
								uni.showToast({
									title: '上传失败',
									icon: 'none'
								})
							}
							uni.hideLoading();
						})
					}
				});
			},
			/* 选择视频 */
			chooseVideo: function() {
				var _this = this;
				uni.chooseVideo({
					success: res => {
						uni.showLoading({
							title: '上传中',
							mask: true
						});
						_this.$uapi.apifile('api/v1/upload', {
							file: res.tempFilePath
						}).then(res => {
							var result = JSON.parse(res.data);
							if (result.code == 200) {
								_this.Vurl = result.data.fileUrl;
							} else {
								uni.showToast({
									title: '上传失败',
									icon: 'none'
								})
							}
							uni.hideLoading();
						})
					}
				});
			},
			/* 清理视频 */
			clearVurl() {
				this.Vurl = '';
			},
			/* 文本框获取焦点 */
			onFocus(e) {
				this.height = e.detail.height;

			},
			/* 文本框失去焦点 */
			onBlur() {
				this.focus = false;
			},
			setText(e) {
				this.topicText = e.target.value;
				this.topicText = this.topicText.replace(/[, ]/g,'');
				var str = e.target.value;
				this.str = str.substr(str.length - 1, 1);
				if (this.str === '#') {
					// this.isChangeTopic = true;
				}
				if (this.str === '@') {
					this.isChangeFriend = true;
				}
				this.$forceUpdate()
			},
			/* 给选中的朋友设置样式 */
			setFriend(e) {
				this.isChangeFriend = false;
				if (this.str == '@') {
					this.topicText += e.nicheng;
				} else {
					var val = '@' + e.nicheng;
					this.topicText += val;
				}
			},
			/* 关闭弹窗 */
			closeAll() {
				this.isChangeFriend = false;
				this.isChangeArea = false;
			}
		}
	};
</script>

<style lang="scss">
	.head {
		display: flex;
		justify-content: flex-start;
		width: 710upx;
		max-height: 400upx;
		margin: auto;
		margin-top: 20upx;
		margin-bottom: 20upx;

		.head-video {
			max-width: 50%;
			position: relative;
			margin-right: 30upx;

			.video {
				max-width: 90%;
				max-height: 400upx;
				z-index: -1;
			}

			.iconjujue {
				color: #ff5a3e;
				position: absolute;
				right: 0;
				font-size: 40rpx;
				z-index: 10000000000000;
				width: 40rpx;
				top: 20upx;
			}
		}

		.head-image {
			position: relative;

			.image {
				width: 300upx;
				height: 100%;
				background-color: #000000;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.video_input {
		width: 710upx;
		height: 400upx;
		margin: auto;

		textarea {
			width: 100%;
		}
	}

	.video-btn {
		width: 710upx;
		margin: auto;
		display: flex;
		justify-content: flex-start;
		margin-bottom: 20upx;

		.video_btn_item {
			width: 120upx;
			height: 60upx;
			line-height: 60upx;
			background: #00D5A2;
			border-radius: 10px;
			text-align: center;
			color: #FFFFFF;
			margin-right: 20upx;
		}
	}

	.video_nav {
		width: 710upx;
		height: 128upx;
		margin: auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-top: 2upx solid #DCDFE6;

		.video_nav_left {
			display: flex;
			justify-content: flex-start;
			align-items: center;

			.video_nav_icon {

				color: #666666;
				margin-right: 10upx;
				width: 40upx;
				height: 40upx;
				line-height: 40upx;

				i {

					font-size: 35upx;
				}

				.icondaohang {

					font-size: 45upx;
				}
			}

			.video_nav_text {
				color: #666666;
				font-size: 34upx;
			}
		}

		.video_nav_right {
			color: #C0C4CC;
			font-size: 32upx;
			display: flex;
			justify-content: flex-end;
			align-items: center;

			.video_nav_right_text {
				color: #00D5A2;
				font-size: 30upx;
				margin-right: 10upx;
			}
		}
	}

	.video_bottom_btn {
		width: 710upx;
		margin: auto;
		margin-top: 100upx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.video_bottom_btn_left {
			width: 120upx;
			height: 70upx;
			text-align: center;
			line-height: 70upx;
			background: #E8E8E8;
			color: #666666;
			border-radius: 10upx;
		}

		.video_bottom_btn_right {
			width: 540upx;
			height: 70upx;
			text-align: center;
			line-height: 70upx;
			background: #00D5A2;
			color: #FFFFFF;
			border-radius: 10upx;

		}
	}

	.nonefile {
		height: 160upx;
		width: 160upx;
		background: #FAFAFA;
		border: 1px solid #DCDFE6;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		border-radius: 8upx;


		.icon-hao {
			font-size: 60upx;
			color: #cccccc;
			line-height: 1.2;
		}

		.none-text {
			color: #999999;
			font-size: 22upx;
		}
	}


	.del {
		position: absolute;
		width: 32upx;
		height: 30upx;
		top: -10upx;
		right: -30upx;
		background-color: #FFFFFF;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;

		i {
			font-size: 36upx;
			color: #FF7171;
		}
	}

	.head-video .del {
		right: 0;
	}
</style>
